<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>自动增加标签示例</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div style="margin-bottom: 20px;">
        <el-button size="small" @click="addTab">添加标签</el-button>
    </div>
    <el-tabs v-model="editableTabsValue" type="card">
        <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
        >
            {{ item.content }}
        </el-tab-pane>
    </el-tabs>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                editableTabsValue: '1',
                editableTabs: [{
                    title: '标签 1',
                    name: '1',
                    content: '标签 1 内容'
                }],
                tabIndex: 1
            }
        },
        methods: {
            addTab() {
                this.tabIndex++;
                const newTabName = this.tabIndex.toString();
                this.editableTabs.push({
                    title: '新增标签',
                    name: newTabName,
                    content: '新增标签内容'
                });
                this.editableTabsValue = newTabName; // 切换到新标签
            }
        }
    });
</script>
</body>
</html>
